<template>
  <div class="page-container">
    <lan-header :config="headerConfig"></lan-header>
    <div class="factory-update-form">
      <lan-form
        :config="formConfig"
        :formData="updateForm"
        class="lan-form"
      ></lan-form>
      <div class="factory-edit-map">
        <factory-map
          ref="factoryMap"
          :oldAmapData="updateForm"
          @amapData="getAMapData"
        ></factory-map>
      </div>
    </div>
  </div>
</template>

<script>
import LanForm from '../../../components/lanForm';
import lanHeader from '../../../components/lanHeader';
import FactoryMap from '../factoryMap.vue';
import { Message } from 'element-ui';
import { parseError } from '../../../utils';
import { getFactoryDetailApi, updateFactoryApi } from '../../../api/factory';
import { validateForm } from './service';
import { queryAreaListApi } from '../../../api/area';

export default {
  name: 'EditFactory',
  components: {
    FactoryMap,
    LanForm,
    lanHeader
  },
  data() {
    return {
      btnLoading: false,
      remoteLoading: false,
      updateForm: {
        uuid: '',
        name: '',
        contactName: '',
        contactMobile: '',
        areaCode: 0,
        latitude: 0,
        longitude: 0,
        areaUuid: '',
        areaName: '',
        location: ''
      },
      headerConfig: {
        title: '工厂列表',
        buttons: [
          {
            text: '保存',
            icon: 'save',
            type: 'primary',
            size: 'small',
            method: () => {
              this.edit();
            }
          }
        ]
      },
      areaList: [],
      formConfig: {
        inline: false,
        size: 'normal',
        hideLabel: false,
        formList: [
          {
            name: 'areaUuid',
            type: 'remoteSelect',
            label: '区域',
            options: () => this.areaList,
            optionValue: 'uuid',
            optionLabel: 'name',
            placeholder: '区域',
            tooltip: '区域是指用来管理工厂，一般按照地域来划分 (湖北区、浙江区)',
            width: 280,
            query: () => {
              this.remoteAreaSearch();
            }
          },

          {
            name: 'name',
            label: '工厂',
            type: 'input',
            placeholder: '请输入工厂名称',
            required: true,
            tooltip: '工厂是用来管理设备（武汉工厂、嘉兴工厂），也可以把工厂理解为设备分组',
            width: 280
          },
          {
            name: 'contactName',
            label: '联系姓名',
            type: 'input',
            placeholder: '请输入联系人姓名',
            required: true,
            tooltip: '工厂联系人姓名',
            width: 280
          },
          {
            name: 'contactMobile',
            label: '联系电话',
            type: 'input',
            placeholder: '请输入联系人电话',
            required: true,
            tooltip: '工厂联系人的手机号码',
            width: 280
          }
        ]
      }
    };
  },
  created() {
    this.remoteAreaSearch();
    // 获取工厂信息
    getFactoryDetailApi(this.$route.params.uuid)
      .then(res => {
        Object.assign(
          this.updateForm,
          {
            uuid: res.uuid,
            name: res.name,
            contactName: res.contact_name,
            contactMobile: res.contact_mobile,
            areaCode: res.area_code,
            latitude: res.latitude,
            longitude: res.longitude,
            location: res.location
          },
          res.area ? { areaUuid: res.area.uuid } : { areaUuid: '' },
          res.area ? { areaName: res.area.Name } : { areaName: '' }
        );
        this.$refs.factoryMap.judgeEditOrAdd();
      })
      .catch(error => Message.error(parseError(error)));
  },
  methods: {
    edit() {
      const validError = validateForm(this.updateForm);
      if (validError) return Message.warning(validError);
      this.btnLoading = true;
      updateFactoryApi(
        this.updateForm.uuid,
        this.updateForm.areaUuid,
        this.updateForm.name,
        this.updateForm.contactName,
        this.updateForm.contactMobile,
        parseInt(this.updateForm.areaCode),
        this.updateForm.latitude,
        this.updateForm.longitude,
        this.updateForm.location
      )
        .then(res => {
          Message.success('更新工厂成功');
          this.$router.replace('/factory/list/');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteAreaSearch(query) {
      this.remoteLoading = true;
      queryAreaListApi(query, 10)
        .then(areaList => (this.areaList = areaList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    getAMapData(amapData) {
      this.updateForm.areaCode = amapData.adcode;
      this.updateForm.longitude = amapData.longitude;
      this.updateForm.latitude = amapData.latitude;
      this.updateForm.location = amapData.location;
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  padding: 10px;
}
.factory-update-form {
  background-color: #fff;
  width: auto;
  padding-top: 20px;
  .lan-form {
    display: flex;
    width: 900px;
    flex-direction: row;
    flex-wrap: wrap;
    .el-form-item {
    }
  }
}
.factory-edit-map {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
</style>
